<template>
	<div class="area-component w-[668px]">
		<el-row :gutter="1">
			<el-col :span="8">
				<!-- 省 -->
				<el-select placeholder="请选择省份" v-model="state.data.province" clearable>
					<el-option v-for="item in state.showData.provinceList" :key="item.code" :label="item.name" :value="item.code" />
				</el-select>
			</el-col>
			<el-col :span="8">
				<!-- 市 -->
				<el-select class="" placeholder="请选择城市" :disabled="!state.data.province" v-model="state.data.city" clearable>
					<el-option v-for="item in state.showData.citiesList" :key="item.code" :label="item.name" :value="item.code" />
				</el-select>
			</el-col>
			<el-col :span="8">
				<!-- 区 -->
				<el-select placeholder="请选择区" :disabled="!state.data.province || !state.data.city" v-model="state.data.area" clearable>
					<el-option v-for="item in state.showData.areasList" :key="item.code" :label="item.name" :value="item.code" />
				</el-select>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
import { reactive, onBeforeMount, watch } from 'vue';
import { areaLists } from '/@/api/setting/area';

const props = defineProps({
	defaultData: {
		type: Object,
		default: function () {
			return { province: '', ity: '', area: '' };
		},
	},
});

// 定义数据类型
export interface areaType {
	code: string;
	name: string;
	children?: areaType[];
}

const emit = defineEmits(['areaChange']);

const state = reactive({
	showData: {
		provinceList: [] as areaType[],
		citiesList: [] as areaType[],
		areasList: [] as areaType[],
	},
	data: {
		province: '',
		city: '',
		area: '',
	},
});

// 初始化数据赋值
onBeforeMount(async () => {
	let provinceData = await areaLists({ code: 0, level: 0 });
	state.showData.provinceList = provinceData;

	state.data.province = props.defaultData.province;

	if (state.data.province) {
		let cityData = await areaLists({ code: state.data.province, level: 1 });
		state.showData.citiesList = cityData;
	} else {
		state.showData.citiesList = [];
	}

	state.data.city = props.defaultData.city;

	if (state.data.city) {
		let areaData = await areaLists({ code: state.data.city, level: 2 });
		state.showData.areasList = areaData;
	} else {
		state.showData.areasList = [];
	}

	state.data.area = props.defaultData.area;

	dataChange();
});

// 监听省、市、地区的变化的变化
watch(
	() => state.data.province,
	async () => {
		state.data.city = '';
		state.data.area = '';
		if (!state.data.province) {
			dataChange();
			return false;
		}
		let cityData = await areaLists({ code: state.data.province, level: 1 });
		state.showData.citiesList = cityData;
	}
);

watch(
	() => state.data.city,
	async () => {
		state.data.area = '';
		if (!state.data.city) {
			dataChange();
			return false;
		}
		let areaData = await areaLists({ code: state.data.city, level: 2 });
		state.showData.areasList = areaData;
	}
);

watch(
	() => state.data.area,
	() => {
		dataChange();
	}
);

// 数据渲染
const dataChange = () => {
	const paramsData = {
		province: {} as areaType,
		city: {} as areaType,
		area: {} as areaType,
	};

	let tmp = state.showData.provinceList.find((item) => item.code === state.data.province);
	paramsData.province.name = tmp ? tmp.name : '';
	paramsData.province.code = tmp ? tmp.code : '';
	tmp = state.showData.citiesList.find((item) => item.code === state.data.city) as any;
	paramsData.city.name = tmp ? tmp.name : '';
	paramsData.city.code = tmp ? tmp.code : '';
	tmp = state.showData.areasList.find((item) => item.code === state.data.area) as any;
	paramsData.area.name = tmp ? tmp.name : '';
	paramsData.area.code = tmp ? tmp.code : '';

	emit('areaChange', paramsData);
};
</script>
<style scoped>
</style>